<template>
  <div class="control-field">
    <div class="content">
      <div class="form">
        <je-form
          :model="formState"
          style="width: 550px"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 17 }"
          autocomplete="off"
          label-align="right"
          :colon="false"
        >
          <je-form-item label="登记人员ID字段编码">
            <je-input v-model:value="formState.userIdsFieldCode" class="my-input" />
          </je-form-item>
          <je-form-item label="登记部门ID字段编码">
            <je-input v-model:value="formState.deptIdsFieldCode" class="my-input" />
          </je-form-item>
          <je-form-item label="登记公司ID字段编码">
            <je-input v-model:value="formState.companyIdFieldCode" class="my-input" />
          </je-form-item>
          <je-form-item label="登记集团公司ID字段编码">
            <je-input v-model:value="formState.groupCompanyIdFieldCode" class="my-input" />
          </je-form-item>
          <je-form-item :style="{ display: 'none' }" label="使用新管理层级" name="textSuvrlevel">
            <je-input-select
              v-model:value="formState.textSuvrlevel"
              class="my-input"
              config-info="JE_CORE_FUNCINFO,userIdsFieldCode~textSuvrlevel,JE_CORE_FUNCINFO_ID~SY_CREATEUSERNAME,M"
            />
          </je-form-item>
        </je-form>
      </div>
    </div>
    <div class="footer">
      <je-button type="primary" :disabled="btnDisabled" class="btn" @click="save"
        >保存刷新</je-button
      >
      <je-button class="btn" :disabled="btnDisabled" @click="reset">恢复数据</je-button>
      <je-button class="btn" @click="closeEvent">关闭</je-button>
    </div>
  </div>
</template>

<script>
  import { defineComponent, onMounted, reactive, ref } from 'vue';

  import { Form, InputSelect, Input, Button, Modal } from '@jecloud/ui';

  import { doSaveApi, getPremDataApi } from '@/api/authorization';

  import { useDialog } from '@/hooks/use-dialog';

  export default defineComponent({
    name: 'ControlField',
    components: {
      JeForm: Form,
      JeInputSelect: InputSelect.Grid,
      JeInput: Input,
      JeFormItem: Form.Item,
      JeButton: Button,
    },
    props: {
      currentFuncId: {
        type: String,
        default: '',
      },
      currentFuncCode: {
        type: String,
        default: '',
      },
      parentModal: String,
    },
    emits: ['isChange'],
    setup(props, { emit }) {
      // 表单数据
      let formState = reactive({
        deptIdsFieldCode: '', // 部门id
        idSuvrlevel: '', // 层级
        textSuvrlevel: '',
        userIdsFieldCode: '', // 用户id
        companyIdFieldCode: '', // 公司id
        groupCompanyIdFieldCode: '', // 集团id
      });

      let meta = {}; //对比项
      const btnDisabled = ref(false); // 按钮禁用

      const funcId = ref('');
      const funcCode = ref('');

      // 保存
      const save = () => {
        // 发生改变才进行操作
        if (isChange()) return Modal.notice('无数据操作!', 'info');
        btnDisabled.value = true;
        // 调用保存接口
        doSaveApi({
          tableCode: 'JE_CORE_FUNCPERM',
          FUNCPERM_FUNCINFO_CODE: funcCode.value,
          FUNCPERM_FUNCINFO_ID: funcId.value,
          FUNCPERM_TYPE: 'controlField',
          FUNCPERM_CONFIG: JSON.stringify(formState),
        }).then((res) => {
          Modal.notice(res.message, 'success');
          btnDisabled.value = false;
          // 对照组赋值
          meta = JSON.parse(JSON.stringify(formState));
        });
      };

      // 回显
      onMounted(() => {
        funcId.value = props.currentFuncId;
        funcCode.value = props.currentFuncCode;
        // 获取页面数据
        if (!funcId.value) return false;
        GetPremData();
      });

      // 初始化数据
      const GetPremData = () => {
        btnDisabled.value = true;
        getPremDataApi({
          tableCode: 'JE_CORE_FUNCPERM',
          FUNCPERM_FUNCINFO_ID: funcId.value,
          FUNCPERM_TYPE: 'controlField',
        }).then((res) => {
          // todo
          // 表单各项数据赋值
          if (res[0]?.values?.FUNCPERM_CONFIG) {
            formState.deptIdsFieldCode = JSON.parse(
              res[0]?.values?.FUNCPERM_CONFIG,
            ).deptIdsFieldCode;
            formState.idSuvrlevel = JSON.parse(res[0]?.values?.FUNCPERM_CONFIG).idSuvrlevel;
            formState.textSuvrlevel = JSON.parse(res[0]?.values?.FUNCPERM_CONFIG).textSuvrlevel;
            formState.companyIdFieldCode = JSON.parse(
              res[0]?.values?.FUNCPERM_CONFIG,
            ).companyIdFieldCode;
            formState.groupCompanyIdFieldCode = JSON.parse(
              res[0]?.values?.FUNCPERM_CONFIG,
            ).groupCompanyIdFieldCode;
            formState.userIdsFieldCode = JSON.parse(
              res[0]?.values?.FUNCPERM_CONFIG,
            ).userIdsFieldCode;
          }
          meta = JSON.parse(JSON.stringify(formState)); // 表单对照组赋值
          btnDisabled.value = false;
        });
      };

      // 对比是否的改变
      const isChange = () => {
        // 每一项相同为真
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };

      // 恢复数据
      const reset = () => {
        Modal.confirm('您确定要恢复数据吗？', () => {
          GetPremData();
        });
      };

      // 切换tab的回调
      const changeTabCb = () => {
        const flag = isChange();
        if (flag) return emit('isChange', flag);
        // 弹框
        useDialog({ toReset: GetPremData, save, isDicOrRole: false });
      };

      // 关闭
      const closeEvent = () => {
        props.parentModal.close();
      };

      return { formState, save, btnDisabled, reset, closeEvent, changeTabCb };
    },
  });
</script>

<style lang="less" scoped>
  .control-field {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 20px;
    border: 1px solid #d7d7d7;
    background: #edf0f4;
    justify-content: space-between;
    align-items: start;
    .footer {
      height: 0px;
      min-height: 70px;
      .btn {
        margin-right: 15px;
        margin-top: 20px;
      }
    }
    .content {
      position: relative;
      margin-top: 20px;
      background: #fff;
      height: 100%;
      width: 100%;
      .form {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 80%;
        left: 70%;
        transform: translate(-50%, -50%);
      }
    }
    .my-input {
      width: 460px;
    }
  }
</style>
